<template>
  <div class="shop-container">
    <ul class="shop-menu-category">
      <li class="shop-menu-category-item menu-category-active">
        <span>备件</span>
      </li>
      <li class="shop-menu-category-item">
        <span>服务</span>
      </li>
    </ul>
    
    <section class="shop-menu-list">
      <div ref="menu-list" class="menu-list">
        <!-- 备件 -->
        <div
          v-for="item in partList"
          :key="item.id"
          class="shop-menu-list-item"
        >
          <div class="product-pic">
            <img v-if="item.image" :src="item.image" />
            <img
              v-else
              class="product-defpic"
              :src="goodsDefaultImage"
            />
          </div>

          <div
            class="product-detail"
            :class="item.isGuideData ? 'superscript' : ''"
          >
            <p class="product-title">{{ item.name }}</p>
            <p class="product-size" v-if="item.serialNumber">
              备件项目编号：{{ item.serialNumber }}
            </p>
            <p class="product-size" v-if="item.type">类别：{{ item.type }}</p>
            <p class="product-size">规格：{{ item.standard || '暂无' }}</p>
            <p class="product-price">
              <span>￥{{ item.salePrice }}</span>
            </p>
          </div>
        </div>

        <div class="app-empty-tip" v-if="partList.length === 0">
          <img :src="noDataImage" />
          <p>暂无数据</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { getOssUrl } from '@src/util/assets'
const goodsDefaultImage = getOssUrl('/defProduct.png')
const noDataImage = getOssUrl('/no_data.png')
export default {
  props: {
    partList: {
      type: Array,
      default: () => [],
    },
  },
  data(){
    return{
      goodsDefaultImage,
      noDataImage
    }
  }
};
</script>

<style lang="scss" scoped>
.shop-container {
  width: 100%;
  background-color: #ffffff;
  display: flex;

  .shop-menu-category {
    position: sticky;
    top: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 91px;
    margin-right: 15px;
    display: flex;
    flex: none;
    flex-flow: column nowrap;
    height: 100%;
    background-color: #fafafa;

    .menu-category-active {
      // color: $color-primary;
      background-color: #ffffff;
    }

    &-item {
      width: 100%;
      height: 48px;
      line-height: 50px;
      text-align: center;
      font-size: 15px;
      color: #333;
      transition: all ease 0.1s;
    }
  }

  .shop-menu-list {
    flex: 1;
    height: 100%;
    padding-right: 10px;
    overflow-x: hidden;
    position: relative;

    .shop-menu-list-head {
      display: flex;

      .base-search-wrap {
        flex: 1;
      }
      .icon-view {
        margin: 10px -10px 0 0;
        width: 40px;
        height: 35px;
        line-height: 35px;
        text-align: center;

        .icon-filter {
          color: #757575;
        }
      }

      .base-search-inner {
        input {
          background-color: #f7f7f7;
        }
      }
    }

    .menu-list {
      height: 100%;
      .base-loadmore {
        padding-bottom: 100px;
      }
    }
  }

  .shop-menu-list-item {
    align-items: top;
    position: relative;
    border-bottom: 0.5px solid #e2e2e2;
    padding: 10px 0;
    display: flex;
  }

  .product-pic {
    width: 70px;
    height: 70px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
    border-radius: 5px;
    margin-right: 10px;

    .product-defpic {
      height: 60px;
      background: #f5f5f5;
      border-radius: 5px;
      padding-top: 10px;
    }

    .iconfont {
      color: #fff;
      font-size: 46px;
    }

    img {
      display: block;
      max-width: 100%;
      max-height: 100%;
    }
  }

  .product-detail {
    flex: 1;
    position: relative;
    padding-bottom: 25px;

    > p {
      display: block;
      max-width: 180px;
      color: #000;
      font-size: 14px;
      word-break: break-all;
    }

    .product-title {
      font-size: 14px;
      font-weight: 550;
    }

    .product-size {
      color: #999;
      font-size: 12px;
      margin-bottom: 6px;
    }

    .product-price {
      position: absolute;
      bottom: 0;
      color: #cd7c83;
      font-size: 14px;
      display: flex;
      width: 100%;
      align-items: center;
      margin: 0;
    }
  }

  .app-empty-tip {
    padding-top: 80px;

    img {
      display: block;
      margin: 0 auto 8px;
      width: 160px;
    }

    p {
      text-align: center;
      color: $text-color-regular;
      margin: 0;
    }
  }
}
</style>
